<template>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

// 创建dom引用
const chart = ref()
//数据
const p_data = ref([
    { value: 36858.1, name: '建筑业' },
    { value: 34662.8, name: '金融业' },
    { value: 25165.8, name: '房地产' },
    { value: 20512.2, name: '制造业' },
    { value: 17867.9, name: '批发零售业' },
    { value: 16014.4, name: '电力、水生产及供应业' },
    { value: 4652.3, name: '采矿业' },
    { value: 18725.8, name: '其它' },
    { value: 6159.6, name: '科技服务与信息传输业' },
    { value: 4132.6, name: '生物医药、化工产业' }
])
//挂载
onMounted(() => {
    // 常见图形实例
    const myChart = echarts.init(chart.value);
    // 创建图形配置
    const option = {
        //背景颜色
        backgroundColor: "white",
        //标题
        title: {
            text: '2024年一季度各税种入库金额',
            left: 'center',
            bottom: 10,
            show: false,
            textStyle: {
                fontFamily: "SimHei",
                fontSize: 13
            }
        },
        //下载工具
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {
                    // 导出图片的分辨率
                    pixelRatio: 20
                },

            }
        },
        //图例
        legend: {
            orient: 'horizontal',
            left: 'center',
            top: 10,
            padding: 3,
            show: false,
            itemWidth: 15,
            itemHeight: 10
        },
        series: [
            {
                // name: 'Access From',
                type: 'pie',
                radius: '61%',
                center:["55%","50%"],
                data: p_data.value,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: true,
                    fontFamily:"Arial",
                    fontSize:15,
                    fontWeight:"bold",
                    color:"black",
                    formatter: (params) => {
                        // return `${params.name} : ${params.value}万元`;
                        return `${params.name} : ${(params.value / 10000).toFixed(1)}亿  \n        (${params.percent.toFixed(1)}%)`;
                    }
                }
            }
        ]
    };
    // 使用指定配置和数据显示图表
    myChart.setOption(option);
})

</script>

<style scoped>
.chart {
    width: 650px;
    height: 300px;
    /* 过渡 */
    transition: 0.5s all linear;
}

.chart:hover {
    /* 缩放 */
    transform: scale(1.025);
    /* 小手 */
    cursor: pointer;
    /* box阴影 */
    box-shadow: 0px 0px 30px gray;
}
</style>
